import { createBrowserRouter } from "react-router-dom";

import App from "../App";
import { lazy } from "react";
import Login from '../pages/login'
import Num from '../pages/num'
const Index = lazy(() => import('../pages/index'))
const Home = lazy(() => import('../pages/home'))
const Real = lazy(() => import('../pages/real'))
const Upload = lazy(() => import('../pages/upload'))

export const elser = [
    {
        path: '/index',
        element: <Index />,
        title: 'index'
    },

]

interface RuleType {
    router: string[];
    mybtn: {
        home: string[];
    };
}

//rbac
const rbacrouter = {
    home: {
        path: '/home',
        element: <Home />,
        title: 'home',
    },
    load: {
        path: '/load',
        element: <Upload />,
        title: 'load'
    },
    real: {
        path: '/real',
        element: <Real />,
        title: 'number'
    }
}



const rules: Record<string, RuleType> = {
    admin: {
        router: ['home', 'load', 'real'],
        mybtn: {
            home: ['dele', 'edit']
        }
    },
    user: {
        router: ['home'],
        mybtn: {
            home: ['dele']
        }
    }
}

const { router, mybtn } = rules[localStorage.getItem('role') || 'admin']
router && router.forEach(item => {
    elser.push({
        ...rbacrouter[item],
        loader: () => {
            return { btns: mybtn[item] }
        }
    })
})

const routes = createBrowserRouter([
    {
        path: '/',
        element: <App />,
        children: elser
    },
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '/num',
        element: <Num />
    }
])

export default routes